<template>
	<view>
		<!-- 1，顶部站位 -->
		<view class="top-zw">
			<view class="top-bottom-box"></view>
			<view class="top-zw-box"></view>
		</view>
		<!-- 2，红包描述 -->
		<view class="send-info">
			<view class="send-info-box">
				<view class="send-head">
					<image :src="redPkgMsg.sendHead"></image>
				</view>
				<view class="send-name">
					<text>{{redPkgMsg.sendName}}的红包</text>
				</view>
				<!-- <view class="send-title">
					<text>拼</text>
				</view> -->
			</view>
		</view>
		<view class="send-info-detail">
			<text>{{redPkgMsg.title}}</text>
		</view>

		<!-- 3，红包金额 -->
		<view class="amount">
			<text>{{getPrice(parseFloat(redPkgMsg.totalAmount) / 100)}}元</text>
		</view>

		<!-- 4，红包提示 -->
		<view class="pkg-tips-box">
			<view class="pkg-tips" v-if="redPkgMsg.dataState == '3'">
				<text>
					该红包已过期；共{{getPrice(parseFloat(redPkgMsg.totalAmount) / 100)}}元，已退还
				</text>
			</view>
			<view v-else class="pkg-tips">
				<text v-if="redPkgMsg.sendId == userId && redPkgMsg.surplusNum != 0">
					{{redPkgMsg.totalNum}}个红包共：{{getPrice(parseFloat(redPkgMsg.totalAmount) / 100)}}，等待对方领取
				</text>
				<text v-else-if="redPkgMsg.sendId == userId && redPkgMsg.surplusNum == 0">
					{{redPkgMsg.totalNum}}个红包共：{{getPrice(parseFloat(redPkgMsg.totalAmount) / 100)}}，对方已领取
				</text>
				<text v-else>
					{{redPkgMsg.totalNum}}个红包共：{{getPrice(parseFloat(redPkgMsg.totalAmount) / 100)}}，已领取
				</text>
			</view>
			<!-- <view class="pkg-time" v-if="redPkgMsg.surplusNum == 0">
				<text>{{getTime(redPkgMsg.createTime,redPkgMsg.lootAllTime) }}被抢光</text>
			</view> -->
		</view>

		<!-- 5，抢到红包的人 -->
		<view class="pkg-tips">
			<!-- <view class=""></view> -->
			<view class="tips-box" v-for="(item,index) in redPkgRobMsg" :key="index">
				<view class="box-left">
					<view class="head" @click="gotoUser(item)">
						<image :src="item.rodUserHead"></image>
					</view>
					<view class="box-info">
						<view class="name">
							<text>{{item.rodUserName}}</text>
						</view>
						<view class="time">
							<text>{{item.createTime}}</text>
						</view>
					</view>
				</view>
				<view class="box-right">
					<view class="rob-amount">
						<text>{{getPrice(item.rodAmount)}}元</text>
					</view>
					<!-- {{item}} -->
					<view class="rob-best" v-if="item.isBest == '2' && item.surplusNum <= 0">
						<view class="best-img">
							<image :src="require('@/static/img/msg/best.svg')"></image>
						</view>
						<view class="best-text">
							<text>手气最佳</text>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="bottom-tips-zw"></view>
		<view class="bottom-tips">
			<text>未领取的红包，将于24小时后发起退款</text>
		</view>

		<!-- 6，底部弹框 -->
		<red-pkg-animation :share="isShowAnimation" @display="closeAnimation"
			@gotoHbMsg="gotoHbMsg"></red-pkg-animation>
	</view>
</template>

<script>
	import {
		queryRedPkgById,
		queryRedPkgRobMessage
	} from '@/api/http/msg/redpkg.js'

	import redPkgAnimation from '../common/red-pkg-animation.vue'

	import {
		handlePrice
	} from '@/utils/price.js'

	export default {
		components: {
			redPkgAnimation
		},
		data() {
			return {
				redPkgMsg: {},
				userId: uni.getStorageSync('userId'),
				isShowAnimation: false,
				friendName: '',

				redPkgRobMsg: [],
			}
		},
		methods: {
			getPrice(price) {

				return handlePrice(price)
			},
			//1，时间处理
			getTime(createTime, lootAllTime) {

				if (createTime == undefined) {
					return
				}
				var d1 = new Date(createTime);
				var d2 = new Date(lootAllTime); //.replace(/\-/g, "/")
				//console.log(parseInt(d2 - d1) / 1000); //两个时间相差的秒数
				var timeS = parseInt(d2 - d1) / 1000 //两个时间相差的秒数
				if (timeS < 60) {
					return parseInt(timeS) + '秒'
				}

				var timeM = parseInt(d2 - d1) / 1000 / 60 //两个时间相差的分钟数
				if (timeM < 60) {
					return parseInt(timeM) + '分钟'
				}
				var timeH = parseInt(d2 - d1) / 1000 / 60 / 60 //两个时间相差的小时数
				if (timeH < 24) {
					return parseInt(timeH) + '小时'
				}
			},
			//2，查询红包信息
			queryRedPkgById(redId) {
				/* queryRedPkgById(redId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//返回得到红包id
					this.redPkgMsg = res.data.busInfo
					console.log(this.redPkgMsg)
					//console.log(res.data.busInfo)
				}) */

				queryRedPkgRobMessage(redId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//返回得到红包id
					//this.redPkgMsg = res.data.busInfo
					//console.log(res.data.busInfo)
					//this.userRobAmount = res.data.busInfo.userRobAmount
					this.redPkgMsg = res.data.busInfo.redPkg
					this.redPkgRobMsg = res.data.busInfo.redPkgRob
				})
			},
			//3，关闭弹框
			closeAnimation() {
				this.isShowAnimation = false
			},
			//4，跳转红包历史页面
			gotoHbMsg() {
				var redPkgMsgInfo = {
					redPkg: '000'
				}
				return uni.navigateTo({
					url: '/subpkg/msg/red-pkg/red-pkg-record/red-pkg-record?redPkgMsgInfo=' + JSON
						.stringify(redPkgMsgInfo)
				})
			}
		},
		onLoad(e) {
			//console.log(e.hbId)
			this.queryRedPkgById(e.hbId)

			this.friendName = e.nickname
		},
		onNavigationBarButtonTap(e) {
			this.isShowAnimation = true
		}
	}
</script>

<style lang="scss">
	.top-zw {
		width: 100%;
		height: 100rpx;
		// background-color: #F55545;
		position: relative;

		.top-bottom-box {
			position: absolute;
			z-index: -9;
			width: 100%;
			height: 50rpx;
			background-color: #F55545;
		}

		.top-zw-box {
			position: absolute;
			width: 100%;
			height: 100rpx;
			border-radius: 50%;
			background-color: #F55545;
		}
	}

	.send-info {
		height: 200rpx;
		position: relative;


		.send-info-box {
			display: flex;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.send-head {
			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}
		}

		.send-name {
			height: 70rpx;
			line-height: 70rpx;

			text {
				margin: 0 10rpx;
				font-size: 32rpx;
			}
		}

		.send-title {
			margin-top: 10rpx;
			width: 50rpx;
			height: 50rpx;
			background-color: #CAAB74;
			text-align: center;
			line-height: 50rpx;

			text {
				color: #fff;
				font-size: 28rpx;
			}
		}

	}

	.send-info-detail {
		text-align: center;

		text {
			color: #B6B6B6;
			font-size: 28rpx;
		}
	}

	.amount {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 54rpx;
		text-align: center;

		text {
			color: #D5AC72;
		}
	}


	.pkg-tips-box {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;

		text {
			font-size: 28rpx;
			color: #B6B6B6;
			// margin-left: 30rpx;
		}

		view {
			height: 100rpx;
			line-height: 100rpx;
		}
	}

	.bottom-tips {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		bottom: 0;
		text-align: center;

		text {
			font-size: 26rpx;
			color: #979797;
		}
	}

	.bottom-tips-zw {
		width: 100%;
		height: 80rpx;
	}


	.pkg-tips {
		width: 94%;
		margin-left: 3%;
	}

	.pkg-tips-box {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;

		text {
			font-size: 28rpx;
			color: #B6B6B6;
			// margin-left: 30rpx;
		}

		view {
			height: 100rpx;
			line-height: 100rpx;
		}
	}

	.tips-box {
		display: flex;
		justify-content: space-between;
		height: 100rpx;

		.box-left {
			display: flex;

			.head {
				image {
					width: 80rpx;
					height: 80rpx;
					padding: 10rpx;
					border-radius: 30rpx;
				}
			}

			.box-info {
				.name {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 32rpx;
				}

				.time {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;

					text {
						color: #B6B6B6;
					}
				}
			}
		}

		.box-right {
			.rob-amount {
				height: 50rpx;
				line-height: 50rpx;
				text-align: right;

				text {
					font-size: 30rpx;
				}
			}

			.rob-best {
				display: flex;

				image {
					margin-top: 5rpx;
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 32rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>